<template>
  <div id="app">
    <template v-if="isLoginPage">
      <router-view></router-view>
    </template>
    <template v-else>
      <div class="app-wrap">
        <left-side></left-side>
        <main-content>
          <router-view></router-view>
        </main-content>
      </div>
    </template>
  </div>
</template>

<script>
  import LeftSide from '@/components/LeftSide';
  import MainContent from '@/components/mainContent/MainContent';
  import axios from 'axios';
  
  export default {
    data() {
      return {
        loading: true
      }
    },
    name: 'App',
    components: {
      LeftSide,
      MainContent
    },
    created() {
      this.islogin();
    },
    computed: {
      isLoginPage() {
        return this.$route.path === '/login' || this.$route.path === '/register'
      }
    },
    methods: {
      islogin() {
        axios.get('/api/islogin').then(function (response) {
          this.loading = true;
          if (response.data.islogin === false) {
            this.$router.push('/login');
          }
        }.bind(this)).catch(function (err) {
          console.log(err)
        });
      }
    }
  }
</script>

<style>
  #app {
    font-family: 'Helvetica Neue', Helvetica, 'PingFang SC', 'Hiragino Sans GB',
      'Microsoft YaHei', '微软雅黑', Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  }
  .app-wrap {
    position: relative;
    width: 100%;
    height: 100vh;
    overflow: hidden;
  }
  /* 保证媒体元素绝不会使用 overflow:visible */
  img, video, canvas {
    max-width: 100%;
    height: auto;
    display: block;
    object-fit: contain !important;
    overflow: hidden !important;
  }
  /* 确保 el-image 组件不会有溢出问题 */
  .el-image {
    overflow: hidden !important;
  }
  /* 全局容器样式 */
  .el-container {
    height: 100%;
    overflow: hidden;
  }
  .el-main {
    overflow-y: auto;
    overflow-x: hidden;
  }
  /* 添加全局滚动条样式 */
  ::-webkit-scrollbar {
    width: 6px;
    height: 6px;
  }
  ::-webkit-scrollbar-thumb {
    background: #c1c1c1;
    border-radius: 3px;
  }
  ::-webkit-scrollbar-track {
    background: #f1f1f1;
  }
</style>

